<template>
	<view class="newOrder">
		<view class="form">
			<view class="form_item">
				<view class="text"><text>*</text>客户:</view>
				<view class="input1">
					<input type="text">
					<view @tap="show=true" class="btn1">
						选择
					</view>
				</view>
			</view>
			<view class="form_item">
				<view class="text"> 订单日期 :</view>
				<view class="input">
					<input v-model="time" @tap="show1=true" type="text">
				</view>
			</view>
			<view class="form_item">
				<view class="text"> 出货量: </view>
				<view class="input">
					<input type="text">
				</view>
			</view>
			<view class="form_item">
				<view class="text"> 出货金额 :</view>
				<view class="input">
					<input type="text">
				</view>
			</view>
			<view class="form_item">
				<view class="text"> 退货量:</view>
				<view class="input">
					<input type="text">
				</view>
			</view>
			<view class="form_item">
				<view class="text"> 退货金额: </view>
				<view class="input">
					<input type="text">
				</view>
			</view>
			<view class="form_item">
				<view class="text"> 总金额:</view>
				<view class="input">
					<input type="text">
				</view>
			</view>
			<!-- <view class="photograph">
				<view class="">

				</view>
				<view class="">

				</view>
			</view> -->

		</view>

		<view class="footer_btn">
			<button @tap="skip('/pages/order/order_details')">取消</button>
			<button  @tap="skip('/pages/order/order_details')">保存</button>
		</view>
		<u-popup :show="show" mode="bottom" :round="20" @close="close" @open="open">
			<view class="toast">
				<view class="form">
					<view class="select">
						<view class="text">
							<text>*</text>客户:
						</view>
						<input v-model="user" type="text" placeholder="123123">
					</view>
				</view>
				<view class="">
					<view class="">
						11321
					</view>
					<view class="">
						11321
					</view>
					<view class="">
						11321
					</view>
				</view>
				<view class="btn">
					<view @tap="search">查询</view>
				</view>
			</view>
		</u-popup>
		<u-calendar :show="show1" :mode="mode" @confirm="confirm"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1: false,
				mode: 'single',
				show: false,
				time:"",
				user:""
			}
		},
		methods: {
			// 模态框
			open() {
				this.show = true
			},
			// 模态框
			close() {
				this.show = false
			},
			confirm(e) {
				// console.log(e[0]);
				this.time = e[0]
				this.show1 = false
			},
			// 查询
			search() {
				if (this.user == '' || this.phone == '') {
					uni.showToast({
						title: "请输入信息",
					icon:"none"
					})
				} else {
					this.show = false
				}
			},
			// 提交
			submit() {
				uni.showToast({
					title: "提交成功",
					icon:"none"
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.newOrder {
		background-color: #f1f1f1;

		.form {
			padding: 0 68rpx 32rpx 68rpx;
			background-color: #fff;
			margin-top: 38rpx;


			.form_item {
				color: #bdbdbd;
				margin-bottom: 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					width: 30%;
					text-align: right;
					margin-right: 10rpx;

					text {
						color: #FE3430;
					}
				}

				.input {
					text-align: center;
					flex: 1;

					input {
						height: 64rpx;
						background: #F2F2F2;
						border-radius: 47rpx;
						text-align: left;
						text-indent: 1em;
						flex: 1;
					}
				}

				.input1 {
					text-align: center;
					flex: 1;
					display: flex;
					align-items: center;

					input {
						height: 64rpx;
						background: #F2F2F2;
						border-radius: 47rpx;
						text-align: left;
						text-indent: 1em;
						flex: 1;
					}

					.btn1 {
						height: 61rpx;
						width: 145rpx;
						line-height: 61rpx;
						background: #fe3430;
						border-radius: 31rpx;
						color: #fff;
						margin-left: 36rpx;
						text-align: center;
					}
				}
			}

			.photograph {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				view {
					width: 293rpx;
					height: 293rpx;
					background: #E8E8E8;
					border-radius: 20rpx;
				}
			}

			.btn {
				display: flex;

				button {
					height: 58rpx;
					line-height: 58rpx;
					background: #fe3430;
					border-radius: 49rpx;
					color: #fff;
					margin-left: 0;
					margin-right: 10rpx;
				}
			}
		}

		.article {
			padding: 32rpx 17rpx;

			.title {
				margin-bottom: 18rpx;
				font-size: 1.125rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: 600;

				.btn {
					margin-left: 266rpx;
					display: flex;

					button {
						height: 58rpx;
						line-height: 58rpx;
						background: #fe3430;
						border-radius: 49rpx;
						color: #fff;
						margin-left: 36rpx;
					}
				}

			}

			.article_table {
				background: #FFFFFF;
				height: 274rpx;
				border-radius: 20rpx;
				padding: 12rpx;
				box-sizing: border-box;
				color: #272727;

				.title {
					height: 100rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					border-bottom: 1px solid #F1F1F1;
				}
			}
		}

		.last {
			margin-bottom: 180rpx;
		}

		.toast {
			padding: 16rpx 49rpx;
			border-radius: 29rpx;

			.btn {
				display: flex;
				justify-content: space-around;
				padding: 30rpx 0;

				view {
					width: 463rpx;
					height: 97rpx;
					background: rgba(254, 52, 48, 0);
					border: 3rpx solid #272727;
					border-radius: 49rpx;
					line-height: 97rpx;
					text-align: center;
					margin: auto;
				}
			}

			.form {
				border-bottom: 1px solid #f1f1f1;
				padding: 0 0 30rpx 0;

				.select {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.text {
						margin: 20rpx 0;
						color: #BDBDBD;
						margin-right: 20rpx;

						text {
							color: #FE3430;
						}
					}

					input {
						flex: 1;
						text-indent: 1em;
						height: 94rpx;
						background: #F2F2F2;
						border-radius: 47rpx;
					}

					.input {
						display: flex;
						align-items: center;
						justify-content: space-between;

						input {
							width: 271rpx;
						}

						text {
							text-align: left;
						}
					}
				}
			}
		}

		.footer_btn {
			display: flex;
			position: fixed;
			bottom: 0rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			// background: #f1f1f1;
			width: 100%;
			padding: 30rpx 0;

			button {
				background: url("/static/images/user/button.png");
				background-size: 280rpx 134rpx;
				width: 280rpx;
				height: 134rpx;
				line-height: 96rpx;
				color: #FFFFFF;

			}
		}
	}
</style>
